<template>
  <div class="bgyans">

    <div class="mar" v-for="(item, index) in listData" :key="item.ticketId" @click="()=>{
      if(type==='center'){
      router.push(`/coupon-detail?id=${item.id}`)
    }}">
      <div class="bg">
        <!--  @click="handelwallet(item)" -->
        <div class="quantity">
          <span>共 1 张</span>
          <span v-if="item.status===1 ">
            <div class="quantity-s">
              <img src="@/assets/images/icons/CalendarOutlined.png" alt=""/>
              <span class="quantity-1">{{item.statusName}}</span>
            </div>
            <img src="@/assets/images/icons/Rectangle391.png" alt=""/>
          </span>
          <span v-if="item.status !== 1">
            <div class="quantity-s">
              <img src="@/assets/images/icons/CheckCircleOutlined.png" alt=""/>
              <span class="quantity-1">{{item.statusName}}</span>
            </div>
            <img src="@/assets/images/icons/Rectangle391-1.png" alt=""/>
          </span>
     </div>
        <div class="wallet">
          <div>
            <div class="wallet-img">
              <van-image
                  v-if="item?.productImage"
                  :src="`${fileUrl}/${item?.productImage}`"
              />
              <van-image class="default_img" v-else :src="defaultImg" width="80" height="80"/>
            </div>
          </div>

          <div class="wallet-info_box">
            <div class="wallet-info">
              <div class="name">
                {{ item.couponName }}
              </div>
              <div v-if="type==='center'">
                <div class="preferential">
                  <div class="icon">
                    ￥
                  </div>
                  <div class="price">
                    {{item.marketPrice?.toFixed((2))}}
                  </div>
                </div>
                <div class="original">{{item.unitPriceStandard?.toFixed(2)}}</div>

              </div>

              <div v-if="item.memberCardName">
                姓名：{{ item.memberCardName }}
              </div>

              <div style="display: flex;flex-direction: row;font-size: 11px">
                <div
                    v-if="item.state == 0 || item.state == 2"
                    :class="{
                  expiring_soon: formatTime(item.endTime).isExpiringSoon,
                }"
                >
                  {{ formatTime(item.endTime, "过期时间").name }}
                </div>
                <div v-else>
                  <div v-if="item.intervalSaleStartTime">
                    售卖时间:{{ item.intervalSaleStartTime }}-{{item.intervalSaleEndTime}}
                  </div>
                  <div v-if="item.validStartTime">
                    有效时间:{{ item.validStartTime }}到{{item.validEndTime}}
                  </div>
                </div>
                <div style="flex-grow: 1"></div>

                <div style="min-width: 70px">
                  <van-button type="primary" size="small" v-if="type==='center'" @click="(event)=>{
                 event.stopPropagation();

                 router.push(`/activityVerifyScenicordel?productid=${item.id}&numberMax=999&productName=coupon`)
               }">立即领取
                  </van-button>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <van-collapse
          accordion
          v-if="item?.isCoupon !== 1 && type==='scenic'"
          v-model="activeNames"
          class="item"
          @change="(e) => handelitem(e, index)"
          :border="false"

      >
        <!-- :name="item.ticketId-->
        <van-collapse-item
            :name="item.orderId"
            :value="item.collapseState === 'open' ? '收起' : '票券码'"
            class="item-collapse"
            :border="false"

        >
          <van-swipe indicator-color="white">
            <van-swipe-item>
              <div class="dis">
                <qrcode-vue
                    :value="item.state == 2 ? '该票券已过期' : item?.ticketId"
                    :size="100"
                    level="H"
                />
                <div v-if="item.state == 1" class="qr-ss">已使用</div>
                <div v-if="item.state == 2" class="qr-ss">已过期</div>
              </div>
              <div class="ticket_code">
                <span>票券码：</span>
                <span>{{ item?.ticketId || "" }}</span>
              </div>
            </van-swipe-item>

            <!-- <template #indicator="{ active, total }">
                            <div class="custom-indicator"><span class="highlighted-number">{{ active + 1 }}</span>/{{ total
                            }}</div>
                        </template> -->
          </van-swipe>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script setup>
import {ref, defineProps, computed} from "vue";
import QrcodeVue from "qrcode.vue";
import {useRoute, useRouter} from "vue-router";
import {useSocket} from "@/hooks/useQRSocket.js";
import {formatTime} from "@/utils/time.js";
import defaultImg from "../../../assets/images/index/none1.png";

const props = defineProps({
  couponlists: Object,
  type: String,
});
const fileUrl = import.meta.env.VITE_FILE_URL;
const router = useRouter();
const route = useRoute();

const activeNames = ref("");
if (route.query.id) {
  activeNames.value = route.query.id;
}

const eventListener = (id, event) => {
  listData.value.forEach((item) => {
    if (item.ticketId === id) {
      item.state = event.data;
    }
  });
};
const {initSocket, socketClose} = useSocket(eventListener);

const listData = computed(() => {
  return props.couponlists;
});

// 查看详细
function handelwallet(item) {
  router.push({
    path: `/order/${item.orderId}`,
    query: {type: props.type},
  });
}

const handelitem = (e) => {
  const someOpen = listData.value.some((item) => item.collapseState === "open");
  if (someOpen) {
    socketClose();
  }
  listData.value?.forEach((item) => {
    if (item.ticketId === e) {
      if (!item.collapseState) {
        item.collapseState = "open";
        initSocket(item.ticketId);
      } else if (item.collapseState === "open") {
        item.collapseState = "close";
      } else if (item.collapseState === "close") {
        item.collapseState = "open";
        initSocket(item.ticketId);
      }
    } else {
      item.collapseState = "close";
    }
  });
};
</script>
<style scoped lang="scss">
.scenic_list {
  width: 100%;
  height: 100%;
  //overflow-y: auto;
  position: absolute;
  /* margin-bottom: 10rem; */
}

.dis {
  display: flex;
  align-items: center;
  justify-content: center;

  .qr-ss {
    background: rgba(255, 255, 255, 0.95);
    position: absolute;
    z-index: 999;
    width: 101px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: #333333;
  }
}

.ticket_code {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: #333333;
  font-weight: 600;
}

.highlighted-number {
  color: #4fac91;
}

:deep(.van-cell__right-icon) {
  color: #4fac91 !important;
}

:deep(.van-cell__value) {
  color: #4fac91 !important;
}

:deep(.--van-cell-border-color) {
  border: 0px !important;
}

.bgyans {
  background: #f9f8f3;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  padding-bottom: 1rem;
}

.title {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #4fac91;
  font-size: 12px;
}

.bg {
  width: 100%;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(@/assets/images/icons/Subtract1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  /* // justify-content: center; */
}

.wallet {
  height: 12rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallet > div:nth-of-type(1) {
  height: 100%;
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallet > div:nth-of-type(2) {
  height: 60%;
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wallet-img {
  width: 60%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}

.wallet-img > .van-image {
  width: 100%;
  height: 100%;
}

.default_img :deep(.van-image__img) {
  object-fit: contain;
}

.wallet-info_box {

  .wallet-info {
    //background: red;
    box-sizing: border-box;
    margin-left: -1rem;
    width: calc(85% + 1rem);
    //height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

    .name {
      line-height: 2rem;
    }

    .expiring_soon {
      font-size: 1.2rem;
      color: #ed6316;
    }
  }
}

.wallet-info > div {
  width: 100%;
  //height: calc(100%/3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wallet-info > div:nth-of-type(1) {
  color: #333333;
  font-size: 1.6rem;
  font-weight: 600;
}

.wallet-info > div:nth-of-type(2) {
  color: #999999;
  font-size: 1.4rem;
  font-weight: 600;
}

.wallet-info > div:nth-of-type(3) {
  color: #999999;
  font-size: 1.4rem;
  font-weight: 600;
}

.qr {
  height: 18rem;
  width: 100%;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.qr-code {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  width: 100%;
  margin-top: 2rem;
  color: #333333;
}

.quantity {
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-left: 3rem;
  box-sizing: border-box;
}

.quantity > span:nth-of-type(1) {
  width: 8rem;
  height: 100%;
  background: rgba(79, 172, 145, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #4fac91;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 16px;
}

.quantity > span:nth-of-type(2) {
  /* // width: 8rem; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #4fac91;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 16px;
}

.quantity > span:nth-of-type(2) > img {
  position: absolute;
  z-index: -1;
  margin-right: 4rem;
}

.my-swipe {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  /* // flex-direction: column;
  // justify-content: center;
  //  border: 1px solid red; */
}

.mar {
  width: 100%;
  margin-top: 0.5rem;
  z-index: 999;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

}

.cart_bg {
  width: 100%;
  height: auto;
  position: absolute;
  /* // z-index: ; */
}

.custom-indicator {
  width: 4rem;
  font-size: 16px;
  border-radius: 3px 3px 3px 3px;
  background: rgba(51, 51, 51, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 44%;
}

.item {
  width: 92.2%;
  /* // margin-left: 1.5rem; */
  margin-top: -2.5rem;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

.item-collapse {
}

.quantity-1 {
  color: #fffffc;
  font-size: 1.4rem;
  margin-right: 0.5rem;
}

.quantity-s {
  display: flex;
  align-items: center;
  margin-right: 3rem;
  width: 100%;
}

.quantity-s > img {
  margin-right: 0.2rem;
}


.preferential {
  display: flex;
  align-items: baseline;
  font-size: 1.2rem;
  color: #ED6316;
  padding-left: .5rem;

  .icon {
    flex-shrink: 0;
    font-size: 1.4rem;
  }

  .price {
    flex-shrink: 0;
    font-size: 2.2rem;
    margin-right: .2rem;
  }
}

.original {
  text-decoration: line-through;
  color: #999999;
  font-size: 1.4rem;
}
</style>